<template>
  <div>
    <div>
      <div class="block">
        <el-carousel height="350px">
          <el-carousel-item v-for="item in 2" :key="item">
            <h3 class="small"></h3>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
    <div>
      <el-container style="background:#f7f7f7;">
        <el-header>
          新茶上市
        </el-header>
        <p>Tea Leave</p>

        <el-main>
          <transition v-for="(i,$index) in arr1" :key="$index" name="no1" >
            <div class="cyzs" v-show="show" @click="show=show" @mouseenter="yr($index)" @mouseout="yc">
              <img :src="i.img" alt="" class="xf" />
             
              <p style="padding-top:10px;">{{i.text}}</p>
               <div style="height:1px;">
               <el-progress  :percentage="yrt" :format="format" v-show='$index==index'></el-progress>
              </div>
              <span>{{i.jia}}</span>
              
            </div>
             
          </transition>
             
        </el-main>
    
          <div class="liaojie ">
             <router-link to="/cy">
            <span class="iconfont icon-weibiaoti40"></span>
                </router-link>
          </div>
      </el-container>
      
      
      <div>
        <div class="forme">
          <div class="forme_child1">
            <h4>关于我们</h4>
            <p>About</p>
          </div>
          <div class="forme_child2">
            <div class="forme_child2-no1">
              <img
                src="https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cDovLzVjZGQzYWE1YzQ2ZWEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNS84YmIyNmU0NTBmNjQ2MGQ1Y2IyYTg1ODhiMGFhNjlmYy01NDB4MjgwLTkwLndlYnA_p_p100_p_3D.webp"
                alt=""
              />
            </div>
            <div class="forme_child2-no2" style="padding:60px 0;">
              <div style="line-height:28px;">
                茶叶源于中国，茶叶最早是被作为祭品使用的。但从春秋后期就被人们作为菜食，在西汉中期发展为药用，西汉后期才发展为宫廷高级饮料，普及民间作为普通饮料那是西晋以后的事。发现最早人工种植茶叶的遗迹在浙江余姚的田螺山遗址，已有6000多年的历史。饮茶始于中国。
              </div>
              <div
                style="background:#90AF6B; width:100px;height:50px;line-height:50px;margin-top:20px;text-align: center;"
              >
                <div>
                  <router-link to="/gy" style="color:#fff;"
                    >了解更多</router-link
                  >
                </div>
              </div>
            </div>
          </div>
        </div>
        
      </div>
    </div>
    <div class="syfooter">
      <div>
        <img src="https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cDovLzVjZGQzYWE1YzQ2ZWEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNC8yMzBlN2NhOWY2YjA2NGFiMzY3MjNkZmJhNWIzNTYyNC0xNTB4NjAtOTAud2VicA_p_p100_p_3D_p_p100_p_3D.webp" alt="">
      </div>
      <div>
        <img src="https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cDovLzVjZGQzYWE1YzQ2ZWEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNC9jNTQ4ZTEyZDAzYWExMTgyYTVmYzlhZjhiMGVkM2E4My0xNTB4NjAtOTAud2VicA_p_p100_p_3D_p_p100_p_3D.webp" alt="">
      </div>
      <div>
        <img src="https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cDovLzVjZGQzYWE1YzQ2ZWEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNC9mYTdiMzVjMDczODkyODg4NWM5Njc0NGNhM2RmMDM0NC0xNTB4NjAtOTAud2VicA_p_p100_p_3D_p_p100_p_3D.webp" alt="">
      </div>
      <div>
        <img src="https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cDovLzVjZGQzYWE1YzQ2ZWEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNC8xN2VhY2JhNzRmZTgwNmQxOTU0YjkxZjQxN2EzNTNkOC0xNTB4NjAtOTAud2VicA_p_p100_p_3D_p_p100_p_3D.webp" alt="">
      </div>
      <div>
        <img src="https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cDovLzVjZGQzYWE1YzQ2ZWEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNC8wMWMwMThiMDBjMDQxYzBiZDcxMjNhOTNmNWExOTI5OC0xNTB4NjAtOTAud2VicA_p_p100_p_3D_p_p100_p_3D.webp" alt="">
      </div>
      <div>
        <img src="https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cDovLzVjZGQzYWE1YzQ2ZWEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNC8xZDI0ZmFiYjRlZGI4OTUwZTEyYjczOTE4ZTc5NjVkOS0xNTB4NjAtOTAud2VicA_p_p100_p_3D_p_p100_p_3D.webp" alt="">
      </div>
    </div>
  </div>
</template>
<script>
  export default {
  methods: {
      format(percentage) {
        return percentage === 100 ? '' : `${''}`;
      },
     yr(index1){
       this.index=index1
       this.type=true
       if(this.type){
this.yrt=100
       }
     },
     yc(){
       this.index=''
       this.type=false
       if(!this.type){
this.yrt=0
       }
     }
  },
    data() {
      
      return {
        show: true,
        type:true,
        yrt:0,
        index:'',     
        arr1: [
          {
            img:
              "https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cDovLzVjZGQzYWE1YzQ2ZWEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNC84MzE0ZmY2ZjJiOTI3NzFmZjY3ZTk2N2VmNDI2MDNlYi00MDB4NDAwLTkwLndlYnA_p_p100_p_3D.webp",
            text: "茉莉花茶",
            jia: "￥223.0"
          },
          {
            img:
              "https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cDovLzVjZGQzYWE1YzQ2ZWEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNC8wYWQzN2JkNDA4Y2NhYzBjMjRjYmY3N2IwNmI0ODg4MC00MDB4NDAwLTkwLndlYnA_p_p100_p_3D.webp",
            text: "白牡丹",
            jia: "￥1，2350"
          },
          {
            img:
              "https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cDovLzVjZGQzYWE1YzQ2ZWEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNC85Nzg1NTAwNmNjMDUwNDU4ZWQwMWZmMTY3YjhiM2Q5Ny00MDB4NDAwLTkwLndlYnA_p_p100_p_3D.webp",
            text: "白毫银针",
            jia: "￥258.0"
          },
          {
            img:
              "https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cDovLzVjZGQzYWE1YzQ2ZWEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNC8wMzMyODZmNzRlZTgzZmIzZTkxOWVlODAwNzgyNGM1MC00MDB4NDAwLTkwLndlYnA_p_p100_p_3D.webp",
            text: "云南普洱",
            jia: "￥500.0"
          },
          {
            img:
              "https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cDovLzVjZGQzYWE1YzQ2ZWEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNC8yNjVmNTg1ZTlmY2ZiOTEwMGUzNzViYWQwNDI1OTAzMS00MDB4NDAwLTkwLndlYnA_p_p100_p_3D.webp",
            text: "湖北老青茶",
            jia: "￥400.0"
          },
          {
            img:
              "https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cDovLzVjZGQzYWE1YzQ2ZWEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNC8yOGVhMWYwNDRjY2E5Yjg1YTNhZmQzMTFjNzNlNjcyNC00MDB4NDAwLTkwLndlYnA_p_p100_p_3D.webp",
            text: "霍山黄芽濛而银针",
            jia: "￥711.0"
          }
        ]
      };
    }
  };
</script>
<style>
.liaojie{

  margin: auto;
 padding: 50px;
}
.liaojie span{
     font-size: 30px;
    padding-left: 25px;
    padding-right: 25px;
    padding-top: 1px;
    padding-bottom: 1px;
    border-width: 2px;
    border-color: #90af6b;
    background-color: #90af6b;
    color: #fff;

}
.el-progress-bar__inner{
  height: 1px;
  background:#519f10 ;
}
.syfooter{
  background: #FFFFFF;
  display: flex;
  justify-content: space-around;
  padding: 20px  50px;
}
.syfooter div{
  width: 200px;
  height:100px;
  
   
}
.syfooter div img{
  background-size: 100% 100%;
 
/* width: 100%;
height: 100%; */
}

  .forme {
    margin: auto;
    min-height: 700px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: center center;
    background-image: url("https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cDovLzVjZGQzYWE1YzQ2ZWEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNS9hMzE0Y2MzMTMzYmEwZGQ5MTY1MDQ2ZjBhNmMwOWZmNy05MC53ZWJw.webp");
  }
  .forme_child1 {
    padding-top: 190px;
  }
  .forme_child1 p {
    text-align: center;
    color: #fff;
  }
  .forme_child1 h4 {
    font-family: 微软雅黑;
    font-size: 26px;
    font-weight: normal;
    font-style: normal;
    color: #ffffff;
    padding: 0 0 5px 0;
    display: block;
    padding: 0 0 5px 0;
    text-align: center;
  }
  .forme_child2 {
    width: 80%;
    min-height: 300px;
    margin: auto;
    background: #fff;
    padding: 20px 10px;
    margin-top: 30px;
    display: flex;
  }
  .forme_child2 div {
    flex: 1;
  }
 

  .el-main .cyzs .xf:hover{
transition: all .5s;
transform: scale(1.1);
}

  .no1-enter,
  .no1-leave-to {
    opacity: 1;
    transform: translateY(-100px);
  }
  .no1-enter-active,
  .no1-leave-active {
    transition: all 1s ease-in-out;
  }

  .cyzs p {
    line-height: 40px;
  }
  .cyzs span {
    display: block;
    line-height: 50px;
  }
  .xt {
    width: 100%;
    border-top: 2px solid #519f10;
  }
  .bor {
    width: 400px;
    height: 2px;
    background: greenyellow;
  }
  .el-container p {
    text-align: center;
    background: #f7f7f7;
  }

  .el-carousel__container {
    min-height: 750px;
  }
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
    overflow-y: hidden;
  }
  .el-carousel__item {
    position: absolute;
    overflow-y: hidden;
  }

  .el-carousel__item:nth-child(2n) {
    background-size: 100% 100%;

    background-repeat: no-repeat;
    background-image: url("https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cDovLzVjZGQzYWE1YzQ2ZWEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNS81OTE2NjgzNjA1NzgxOWEwNWM0ZmY2ZDk1YWMzNTQ4Yi05MC53ZWJw.webp");
  }

  .el-carousel__item:nth-child(2n + 1) {
    background-size: 100% 100%;

    background-repeat: no-repeat;
    background-image: url("https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cDovLzVjZGQzYWE1YzQ2ZWEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNS82MWE3MmU5YWE1OGE3NWFmNjRkYWUyODNhMDMwNDU0MC05MC53ZWJw.webp");
  }
  .el-header,
  .el-footer {
    text-align: center;
    line-height: 60px;
    padding: 60px 0;
    font-size: 24px;
    font-family: "微软雅黑";
    background: #f7f7f7;
  }
  .el-header p {
    font-size: 13px;
    padding: 60px 0;
  }

  .el-aside {
    background: #f7f7f7;
    color: #333;
    text-align: center;
    line-height: 200px;
  }

  .el-main {
    background: #f7f7f7;
    color: #333;
    text-align: center;
    /* line-height: 160px; */
    padding: 30px 30px;
  }

  .el-main .cyzs {
    float: left;
    min-width: 400px;
    padding: 10px 40px;
  }

  body > .el-container {
    margin-bottom: 40px;
  }

  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }

  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
</style>
